<template>
    <input
        :type="state.naviBar.searchBarTaggle.type"
        :name="state.naviBar.searchBarTaggle.name"
        :id="state.naviBar.searchBarTaggle.id"
        :class="state.naviBar.searchBarTaggle.style"
    />

    <!-- 手机折叠菜单 -->
    <input type="checkbox" id="toggleMenuPhone" :checked="checked" class="absolute hidden" />

    <ul
        class="toggleMenuList rounded-br-md fixed top-12 transition-all duration-500 w-1/2 h-1/2 bg-gray-700 flex flex-col z-50 text-white justify-around overflow-hidden"
    >
        <router-link
            tag="li"
            :to="item.path"
            v-for="(item, index) in state.naviBar.content"
            :key="index.toString()"
            :id="index.toString()"
            class="pl-4 rounded-b-sm border-b-2 pb-1 mx-4"
        >
            <div @click="closeMenu">
                <span>{{ item.title }}</span>
            </div>
        </router-link>
    </ul>

    <div
        :class="state.naviBar.navigatorBarContainerStyle"
        class="naviBarContainer z-50 overflow-hidden"
    >
        <!-- 电脑端 -->
        <ul :class="state.naviBar.navigatorBarStyle">
            <li :class="state.naviBar.logo.style"></li>
            <li
                v-for="(item, index) in state.naviBar.content"
                :key="index.toString()"
                :class="item.style"
                :id="index.toString()"
            >
                <router-link :to="item.path">
                    <span>{{ item.title }}</span>
                </router-link>
            </li>
            <li :class="state.naviBar.search.style">
                <label :for="state.naviBar.search.labelId" :class="state.naviBar.search.labelStyle"></label>
            </li>
        </ul>
        <!-- 手机端 -->
        <div class="toggleMenuContainer flex justify-between h-full bg-black md:hidden">
            <label
                class="toggleMenu relative flex flex-col justify-center items-center w-12 ml-2"
                @click="closeMenu"
            ></label>

            <div class="w-12 bg-small-logo bg-contain bg-center"></div>
            <input type="checkbox" id="searchPhone" class="absolute hidden" />
            <label
                for="searchPhone"
                class="searchIconPhone w-12 h-full pt-2 pb-1 px-2 relative bg-black"
            >
                <div class="bg-small-search bg-center bg-contain bg-no-repeat w-full h-full"></div>
            </label>
            <!-- 手机端搜索 -->
            <div class="searchPhoneToggle flex justify-around absolute w-full h-full py-1 px-2">
                <label
                    for="searchPhone"
                    class="bg-black bg-center bg-contain bg-no-repeat w-10 h-10 pt-1 px-1"
                >
                    <div class="bg-small-search bg-center bg-contain bg-no-repeat w-full h-full"></div>
                </label>
                <input
                    type="text"
                    class="border-2 h-full w-full outline-none rounded-sm text-lg pl-3 text-gray-600 tracking-wider"
                    :ref="inputRefPhone"
                    v-model="search.inputData"
                />
            </div>
        </div>
        <!-- 电脑端搜索栏 -->
        <div :class="state.naviBar.searchBar.searchBarStyle">
            <div :class="state.naviBar.searchBar.searchBarContainerStyle">
                <div :class="state.naviBar.searchBar.searchBarSearchStyle">
                    <div :class="state.naviBar.searchBar.searchBarIconStyle"></div>
                    <input
                        :type="state.naviBar.searchBar.searchBarInput.type"
                        :placeholder="state.naviBar.searchBar.searchBarInput.placeholder"
                        :class="state.naviBar.searchBar.searchBarInput.style"
                        :ref="inputRefDesktop"
                        v-model="search.inputData"
                    />
                    <div :class="state.naviBar.searchBar.closeIcon.closeIconStyle">
                        <label
                            :for="state.naviBar.searchBar.closeIcon.labelFor"
                            :class="state.naviBar.searchBar.closeIcon.closeIconLableStyle"
                        >x</label>
                    </div>
                </div>
                <ul
                    :class="state.naviBar.searchBar.searchBarListStyle"
                    v-if="(search.inputData || search.flag) && search.searchData.length !== 0"
                >
                    <li
                        v-for="(searchItem, searchIndex) in search.searchData"
                        class="searchItem transition-transform duration-500 transform translate-x-1/3 text-sm py-1 my-1 pl-14 flex items-center font-light cursor-pointer hover:bg-gray-100 hover:text-blue-600"
                        :key="searchIndex"
                    >{{ searchItem.title }}</li>
                </ul>
                <ul :class="state.naviBar.searchBar.searchBarListStyle" v-else>
                    <li
                        v-for="(searchItem, searchIndex) in state.hotData"
                        class="searchItem transition-transform duration-500 transform translate-x-1/3 text-sm py-1 my-1 pl-14 flex items-center font-light cursor-pointer hover:bg-gray-100 hover:text-blue-600"
                        :key="searchIndex"
                    >{{ searchItem.title }}</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watchEffect } from "vue";
import { search, state } from "@utils/store";
import { searchMethod } from "@utils/utils";

let checked = ref(false)
const closeMenu = () => {
    checked.value = !checked.value
}


let inputPhone: HTMLInputElement
let inputDesktop: HTMLInputElement
const inputRefPhone = (el: HTMLInputElement) => {
    inputPhone = el
    return ref(el)
}
const inputRefDesktop = (el: HTMLInputElement) => {
    inputDesktop = el
    return ref(el)
}

onMounted(() => {
    searchMethod(inputPhone)
    searchMethod(inputDesktop)
})

watchEffect(() => {
    if (search.inputData === '') {
        search.searchData = []
        search.lock = true
    }
})



</script>

<style lang="scss">
.searchPhoneToggle {
    transform: translateX(100vw);
    transition: ease-in-out all 0.5s;
}
#searchPhone:checked ~ .searchPhoneToggle {
    transform: translateX(0vw);
}

.toggleMenu {
    position: relative;
}
.toggleMenu:before {
    position: absolute;
    content: "";
    width: 33px;
    height: 3px;
    background-color: #d0cfce;
    transform: translateY(-6px);
    border-radius: 10px;
    transition: transform 0.5s ease-in-out;
}
.toggleMenu:after {
    position: absolute;
    content: "";
    width: 33px;
    height: 3px;
    background-color: #d0cfce;
    transform: translateY(6px);
    border-radius: 10px;
    transition: all 0.5s ease-in-out;
}
.toggleMenuList {
    opacity: 0;
    transform: translateX(-100%);
    box-shadow: 0 0 1000px 1000px rgba(0, 0, 0, 0.7);
}

#toggleMenuPhone:checked ~ .toggleMenuList {
    transform: translateX(0%);
    opacity: 1;
}
#toggleMenuPhone:checked
    ~ .naviBarContainer
    .toggleMenuContainer
    .toggleMenu:before {
    transform: translateY(0px) rotate(45deg);
}
#toggleMenuPhone:checked
    ~ .naviBarContainer
    .toggleMenuContainer
    .toggleMenu:after {
    transform: translateY(0px) rotate(-45deg);
}
#searchBarCheck:checked ~ .naviBarContainer {
    overflow: visible;
}

#searchBarCheck:checked ~ .naviBarContainer .searchBar {
    opacity: 1;
    transform: translate(-50%, -50%);
    display: flex;
}

#searchBarCheck:checked ~ .naviBarContainer .searchBar .searchBarContainer {
    box-shadow: 0 0 0 10000px rgb(0, 0, 0, 0.5);
}
#searchBarCheck:checked ~ .naviBarContainer .searchBar .searchItem {
    transform: translateX(0);
}

.naviBarContainer {
    position: fixed !important;
    width: 100vw !important;
}

@for $i from 1 through 5 {
    .searchItem:nth-child(#{$i}) {
        transition-delay: 0s + ($i - 1) * 0.1;
    }
}

#searchBarCheck:checked
    ~ .state.naviBarContainer
    .navigatorBar
    > .navi_item:nth-child(n + 2) {
    opacity: 0;
    transform: scale(0, 0);
}

.navi_item:hover {
    text-shadow: 0 0 13px rgba(255, 255, 255);
}
.searchBar {
    transform: translate(150%, -50%);
    .searchInput {
        outline: none;
    }
}
</style>